<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="resources/test.css">
</head>
<body>
    <div id="main_div">
        <div class="son_div">
            <div class="son_son_div"></div>
        </div>
        <div class="son_div">
            <div class="son_son_div"></div>
        </div>
        <div class="son_div">
            <div class="son_son_div"></div>
        </div>
    </div>
    <br>
    <p id="Title">表单测试</p>
    <!-- form表单：
            action -- 表单数据提交的url地址
            method -- 提交数据的方式get/post
             -->
    
    <div id="form_div">
        <!-- 移除 action 和 method，通过 JavaScript 处理提交 -->
        <form id="imageForm">
            keyword<input type="text" name="keyword" id="keyword_input">
            <br>
            R：<input type="radio" name="r18" value="0">关闭
            <input type="radio" name="r18" value="1">开启
            <br>
            size
            <br><select name="size" id="size_selector">
                <option value="small">*最小*首页略缩图</option>
                <option value="regular">*中等*作品页面展示图</option>
                <option value="origin">*最大*原图</option>
            </select>
            <br>
            <div id="btn_div">
                <input type="submit" value="提交" id="submit_btn" class="btn">
                <input type="reset" value="重置" id="reset_btn" class="btn">
            </div>
            
        </form>
    </div>

    <footer>
        <p>- Rohdes Island -</p>
        <p>All Rights Reserved.</p>
    </footer>

    <!-- <div id="pic_div">
        <img src="https://i.pixiv.re/c/540x540_70/img-master/img/2021/12/10/00/01/15/94674593_p1_master1200.jpg" alt="">
    </div> -->

    <script>
        document.getElementById('imageForm').addEventListener('submit', async function(e) {
            e.preventDefault(); // 阻止表单默认提交行为

            const formData = new FormData(this);
            const targetUrl = 'https://image.anosu.top/pixiv/direct'; // 移除 URL 参数

            try {
                console.log('请求的目标 URL:', targetUrl); // 打印请求的 URL 用于调试
                // 发起 POST 请求
                const response = await fetch(targetUrl, {
                    method: 'POST',
                    body: formData // 将表单数据放在请求体中
                });

                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                // 解析响应的 JSON 数据
                const jsonData = await response.json();
                console.log('获取到的 JSON 数据:', jsonData);

                if (jsonData.length > 0 && jsonData[0].url) {
                    const imageUrl = jsonData[0].url;
                    console.log('获取到的图片 URL:', imageUrl); // 打印获取到的图片 URL
                    const imgElement = document.createElement('img');
                    imgElement.src = imageUrl;
                    // 可根据需要添加样式
                    imgElement.style.maxWidth = '100%'; 
                    const picDiv = document.getElementById('pic_div');
                    picDiv.innerHTML = ''; // 清空之前的图片
                    picDiv.appendChild(imgElement);
                } else {
                    console.error('JSON 数据中未获取到图片 URL');
                }
            } catch (error) {
                console.error('请求出错，详细信息：', error);
                if (error.name === 'TypeError') {
                    console.error('可能是跨域问题或网络请求被阻止，请检查目标服务器的 CORS 配置。');
                }
            }
        });
    </script>
</body>
</html>